{extend name="layout/plugin_layout" /}
﻿
{block name="title"}{$plugin.title} - {$app.title}{/block}
{block name="head"}
<script src="{:npm_cdn()}/crunker@1.3.0/dist/crunker.js"></script>
{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body overflow-auto">
            <div class="main">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">金额</span>
                    </label>
                    <input type="number" v-model="set.input" class="input input-bordered input-primary">
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">语音类型</span>
                    </label>
                    <select class="select w-full select-primary" v-model="set.type">
                        <option value="success">正常收款</option>
                        <option value="koubei_daibo">口碑收款</option>
                    </select>
                </div>

                <div class="card-actions mt-4">
                    <button class="btn btn-primary flex-1" @click="play">
                        播放
                    </button>
                    <button class="btn btn-primary flex-1" @click="reset">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                  clip-rule="evenodd"/>
                        </svg>
                        随机
                    </button>
                </div>
                <div v-show="set.output" class="mt-4">
                    <audio class="w-full" :src="set.output" controls="controls" autoplay></audio>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function NoToArr(num) {
        if (!/^\d*(\.\d*)?$/.test(num)) {
            throw new Error('Number is wrong!');
        }
        // var AA = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        // var BB = ["", "十", "百", "千", "万", "亿", "点", ""];
        const AA = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
        const BB = ["", "ten", "hundred", "thousand", "ten_thousand", "ten_million", "dot", ""];
        let a = ("" + num).replace(/(^0*)/g, "").split("."),
            k = 0,
            re = [];
        for (let i = a[0].length - 1; i >= 0; i--) {
            switch (k) {
                case 0:
                    re.unshift(BB[7])
                    // re = BB[7] + re;
                    break;
                case 4:
                    if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
                        re.unshift(BB[4])
                    // re = BB[4] + re;
                    break;
                case 8:
                    // re = BB[5] + re;
                    re.unshift(BB[5])
                    BB[7] = BB[5];
                    k = 0;
                    break;
            }
            if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) {
                // re = AA[0] + re
                re.unshift(AA[0])
            }
            if (a[0].charAt(i) != 0) {
                // re = AA[a[0].charAt(i)] + BB[k % 4] + re
                re.unshift(BB[k % 4])
                re.unshift(AA[a[0].charAt(i)])
            }
            k++;
        }
        if (a.length > 1) //加上小数部分(如果有小数部分)
        {
            // re += BB[6];
            re.push(BB[6])
            for (let i = 0; i < a[1].length; i++) {
                // re += AA[a[1].charAt(i)]
                re.push(AA[a[1].charAt(i)])
            }
        }
        re = re.filter(v => v)
        return re;
    }

    new Vue({
        el: '#app',
        data: {
            set: {
                input: 1000,
                type: 'success',
                output: null,
            },
            crunker: null,
        },
        created() {

        },
        methods: {
            play() {
                let loading = $message.loading('正在生成')
                try {
                    let arr = NoToArr(this.set.input);
                    for (const k in arr) {
                        arr[k] = `{:plugin_static($plugin.alias)}/tts_${arr[k]}.mp3`
                    }
                    let crunker = new Crunker.default();
                    crunker
                        .fetchAudio(
                            '{:plugin_static($plugin.alias)}/diaoluo_da.mp3',
                            `{:plugin_static($plugin.alias)}/tts_${this.set.type}.mp3`,
                            ...arr,
                            '{:plugin_static($plugin.alias)}/tts_yuan.mp3',
                        )
                        .then((buffers) => crunker.concatAudio(buffers))
                        .then((merged) => crunker.export(merged, 'audio/mp3'))
                        .then((output) => {
                            this.set.output = output.url
                        })
                        .catch((error) => {
                            throw new Error(error);
                        });
                } catch (e) {
                    $message.error(e)

                } finally {
                    loading.close()
                }
            },
            reset() {
                this.set.input = Math.round(Math.random() * 9999999) / 100.0;
            },
        },
    })

</script>

{/block}